<template>
	<div>
		<el-card>
			<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef">
					<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
					</v-form-render>
			</el-form>
			<footer class="el-dialog__footer" style="text-align:center">
				<span class="dialog-footer">
					<el-button @click="handleClose()">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(dataFormRef)">确定</el-button>
				</span>
			</footer>
		</el-card>
	</div>
</template>

<script lang="ts">
import { getCurrentInstance, ref, defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import {systemApi} from '/@/api/systemapi'
import { FormInstance, MessageParamsTyped, ElMessage, ElLoading } from 'element-plus'
import request from '/@/utils/request'

export default defineComponent({
	name: 'dynamicAppBusinessAdd',
	setup() {
		const storesTagsViewRoutes = useTagsViewRoutes();
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
		const vFormRef = ref()
		const route = useRoute()
		const dataFormRef = ref()
		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			params: {
				path: '',
				params: '',
			},
			formJson:{"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion": 3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
			formData: {},
			optionData: {},
			customizeApi: '0',
			addApiUrl: '',
			dataForm: {
				formData: {},
				taskParams: {
					taskDefCode: ''
				},
				designerId: '',
				designerCode: ''
			},
			dataRule: {}
		});
		// 设置 view 的高度
		const setViewHeight = computed(() => {
			let { isTagsview } = themeConfig.value;
			if (isTagsViewCurrenFull.value) {
				return `30px`;
			} else {
				if (isTagsview) return `114px`;
				else return `80px`;
			}
		});
		// 页面加载时
		onMounted(() => {
			state.params = <any>route;
			initFormJson(state.params.params.id)
		});
		const initFormJson = (formCode: string) => {
			systemApi().getSysBusinessDesignerByCodeHasJson(formCode).then((data) => {
				if (data && data.code === 0) {
					vFormRef.value.setFormJson(data.data.newFormJson)
					state.dataForm.designerId = data.data.id
					state.dataForm.designerCode = data.data.designerCode
					state.dataForm.taskParams.taskDefCode = data.data.taskDefCode
					state.customizeApi = data.data.customizeApi
					state.addApiUrl = data.data.addApiUrl
				}
            })
		} 
		//取消修改
		const handleClose = () => {
			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }))
		}
		//提交表单
		const dataFormSubmit = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			vFormRef.value.getFormData().then((formData: any) => {
				state.dataForm.formData = formData
				const loading = ElLoading.service({
					lock: true,
					text: '处理中',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				if(state.customizeApi === '1'){
					//自定义后端接口的情况
					request({
						url: state.addApiUrl,
						method: 'post',
						data: state.dataForm
					}).then((data) => {
						if(data && data && data.code === 0){
							ElMessage.success('提交成功')
							handleClose()
						}else{
							ElMessage.error(data.msg)
						}
					}).catch(() => {
						ElMessage.error('提交数据失败')
					}).finally(() => {
						loading.close()
					})
				}else{
					//默认的后端接口，以json格式存储表单数据
					systemApi().submitBusinessCommonAdd(state.dataForm).then((data) => {
						if(data && data && data.code === 0){
							ElMessage.success('提交成功')
							handleClose()
						}else{
							ElMessage.error(data.msg)
						}
					}).catch(() => {
						ElMessage.error('提交数据失败')
					}).finally(() => {
						loading.close()
					})
				}
			}).catch((error: MessageParamsTyped | undefined) => {
				ElMessage.error(error)
			})    
		}
		return {
			setViewHeight,
			vFormRef,
			initFormJson,
			handleClose,
			dataFormSubmit,
			dataFormRef,
			...toRefs(state),
		};
	},
});
</script>
<style scoped>

</style>